<template>
  <div class="page-main">
    <query-page
      ref="queryForm"
      v-model:selected-keys="selectedKeys"
      title="单一控制清单"
      :form-component-config="formComponentConfig"
      :form-render-config="formRenderConfig"
      :form-render-keys="formRenderKeys"
      :table-component-config="tableComponentConfig"
      :table-render-config="mainform"
      :table-render-keys="mainformKeys"
      :loading="isLoading"
      :data="datalist"
      :total="datalistTotal"
      row-selection-type="checkbox"
      @query-data="getData"
    >
      <template #container-side>
        <a-button
          v-permission="['base:unique-control:save']"
          type="primary"
          @click="addListData('新增')"
          >新增</a-button
        >
        <a-button
          v-permission="['base:unique-control:delete']"
          type="dashed"
          :disabled="selectedKeys.length === 0"
          @click="asyncHanDel"
          >删除</a-button
        >
        <a-button disabled>提交审批</a-button>
      </template>
      <template #operate="row">
        <a-button
          :hidden="!['1'].includes(row.record.billStatus)"
          v-permission="['base:unique-control:update']"
          type="text"
          @click="editListData(row)"
          >编辑</a-button
        >
        <a-button
          :hidden="!['1'].includes(row.record.billStatus)"
          v-permission="['base:unique-control:delete']"
          type="text"
          @click="listDel(row)"
          >删除</a-button
        >
        <a-button type="text" @click="detailsList(row)">详情</a-button>
      </template>
    </query-page>
    <!-- 添加/编辑弹框 -->
    <myModal
      v-if="showModal"
      :edit-id="editId"
      :data-list-edit="dataListEdit"
      :title="operationStatus"
      @close="closeModal"
      @refresh1="refresh"
    ></myModal>
    <detailsModal
      v-if="detalisModal"
      :detalis-id="detalisId"
      @close="closeDetalisModal"
    >
    </detailsModal>
  </div>
</template>

<script setup lang="ts">
  import { ref, defineAsyncComponent } from 'vue';
  import queryPage from '@/common/components/query-page/index.vue';
  import { Message } from '@arco-design/web-vue';
  import {
    formRenderConfig,
    formRenderKeys,
    formComponentConfig,
  } from '@/views/basic-configuration/singlelist/Singlelistform';
  import {
    getSingleSourceList,
    delSingleList,
    delDetailsLeList,
    detailsData,
  } from '@/api/Basimanagementapi/categorymanagement';
  import useModal from '@/common/hooks/modal';
  import {
    mainform,
    mainformKeys,
    tableComponentConfig,
  } from '@/views/basic-configuration/singlelist/Singlelistcolums';
  import modalPromise from '@/common/utils/modal-promise';

  const myModal = defineAsyncComponent(
    () => import('@/views/basic-configuration/singlelist/Singleaddmodal.vue')
  );
  const detailsModal = defineAsyncComponent(
    () => import('@/views/basic-configuration/singlelist/singlelistDetalis.vue')
  );
  const { showModal, openModal, closeModal } = useModal();
  const isLoading = ref(false);
  const operationStatus = ref('');
  const datalist = ref([]);
  const queryForm = ref();
  const datalistTotal = ref();
  const getData = async (form = {}) => {
    datalist.value = [];
    if (form?.createTime?.length > 1) {
      form.createTime[0] += ' 00:00:00';
      form.createTime[1] += ' 23:59:59';
      form.createTime = form.createTime.join();
    }
    const { data } = await getSingleSourceList(form);
    datalist.value = data.list;
    datalistTotal.value = data.total;
    if (datalist.value.length === 0 && datalistTotal.value !== 0) {
      if (queryForm.value?.getStatus().pageNo > 1) {
        queryForm.value?.setCurrent(queryForm.value.getStatus().pageNo - 1);
        getData(queryForm.value.getStatus());
      }
    }
  };

  const selectedKeys = ref([]);
  // 编辑
  const dataListEdit = ref();
  const editId = ref();
  const editListData = async (row: any) => {
    if (row.record.billStatusName !== '编制中') {
      Message.warning('非编制中数据，不能编辑！');
      return;
    }
    const { data } = await detailsData(row.record.id);
    dataListEdit.value = data;
    editId.value = row.record.id;
    operationStatus.value = '编辑';
    openModal();
  };
  // 添加
  const addListData = (status: any) => {
    operationStatus.value = status;
    openModal();
  };
  // 表单后的事件
  const refresh = () => {
    getData(queryForm.value.getStatus());
  };
  // 列表删除
  const listDel = async (row: any) => {
    if (row?.record.billStatusName !== '编制中') {
      Message.warning('非编制中数据，不能删除！');
    }

    try {
      await modalPromise.info({
        title: '请确认',
        content: '您确定要删除当前所选的数据？',
        hideCancel: false,
      });
    } catch {
      return;
    }
    const { data: res } = await delDetailsLeList(row.record.id);
    if (res) Message.success('删除成功');
    getData(queryForm.value.getStatus());
  };
  // 详情
  const detalisId = ref();
  const detalisModal = ref(false);
  const detailsList = (row: any) => {
    detalisId.value = row.record.id;
    detalisModal.value = true;
  };
  const closeDetalisModal = () => {
    detalisModal.value = false;
    console.log('关闭');
  };
  const asyncHanDel = async () => {
    const arr = datalist.value.filter((v) => {
      return selectedKeys.value.includes(v.id);
    });
    const status = arr.every((v) => v.billStatus === '1');
    if (!status) {
      Message.warning('非编制中数据，不能删除！');
      return;
    }
    try {
      await modalPromise.info({
        title: '请确认',
        content: '您确定要删除当前所选的数据？',
        hideCancel: false,
      });
    } catch {
      return;
    }
    const { data: res } = await delSingleList(selectedKeys.value);
    if (res) Message.success('删除成功');
    getData(queryForm.value.getStatus());
  };
</script>
